<template>
  <div class="app-container">

      <el-row :gutter="20">
        <!--章节数据-->
        <el-col :span="4" :xs="24">
          <h5>教材章节</h5>
          <div class="head-container">
            <el-tree
              :data="nodeOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <!--用户数据-->
        <el-col :span="20" :xs="24">
          <br />
          <div v-html="content.content" v-if="content != null"></div>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import { selectBookContent } from "@/api/teach/bookContent";
import { listNodeTree, getNode } from "@/api/teach/node";
import { getBook } from "@/api/teach/book";
import Editor from '@/components/Editor';

export default {
  name: "ViewBookContent",
  components: {
    Editor,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 章节列表
      nodeOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bookId: null,
        nodeId: null,
        isCurrent: 'Y',
      },
      // 表单参数
      form: {},
      book: null,
      node: null,
      content: null
    };
  },
  created() {
    const id = this.$route.params && this.$route.params.bookId;
    getBook(id).then(response => {
      this.book = response.data;
    });

    listNodeTree(id).then(response => {
      this.nodeOptions = response.data;

      this.getContent(response.data[0])
    });
  },
  methods: {
    getContent(node) {
      this.content = null;
      selectBookContent({nodeId:node.id, isCurrent:'Y'}).then(response => {
        if(response.total > 0){
          this.content = response.rows[0];
        }else if(node.children){
          this.getContent(node.children[0]);
        }else{
          this.content = {content:'没有内容'};
        }
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.getContent(data);
    }
  }
};
</script>
